<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>页面布局</title>
	<style>
	/* 流体定位布局（不写像素而是写百分比）
		用的很少*/
	*{
		margin:0;
		padding:0;
	}
		#root{/* 固定宽度且居中 */
		width:80%;
		margin:0 auto;
		min-height: 800px;
		background: red;
		/*
		static:相对定位并且位置参数无效
		relative:相对定位
		absolute:绝对于父元素
		fixed:绝对于浏览器
		*/
		position: relative;
		
		}
		#head{
			height:100px;
			background: #ccc;
		}
		#left{
			height:600px;
			background: #333;
			width: 20%;
		}
		#mid{
			height:600px;
			width:60%;
			background: #888;
			position:absolute;/* 默认根据浏览器来定位 */
			head:100px;
			left:20%;
		}
		#right{
			height:600px;
			background: #333;
			width: 20%;
			/*
			static:相对定位并且位置参数无效
			relative:相对定位
			absolute:绝对于父元素
			fixed:绝对于浏览器
			*/
			position: absolute;
			top: 100px;
			right: 0;
		}
		#foot{
			height:100px;
			background: black;
		}
	</style>
</head>
<body>
	<div id="root">
		<div id="head"></div>
		<div id="mid"></div>
		<div id="left"></div>
		<div id="right"></div>
		<div id="foot"></div>
	</div>
</body>
</html>